<template>
  <div id="app">
    <jheader></jheader>

    <div class="mainRouter">
      <transition name="fade">
        <router-view></router-view>
      </transition>
    </div>

  </div>

</template>

<script>
import jheader from './components/Header';

export default {
  name: 'app',
  data () {
    return {

    }
  },
  methods: {

  },
  computed:{

  },
  components: {
      jheader
  },
  mounted(){
    
  },
  watch:{
    '$route'(val){
      console.log(val)
    }
  }
}
</script>

<style>
html,body,#app{
  height: auto;
  position: relative;
  font-size: 14px;
  /*min-height: 100vh;*/
  height: 100%;
  font-family: Helvetica Neue,Roboto Light,PingFang SC,Lantinghei SC,Hiragino Sans GB,Microsoft Yahei,Arial;
}
.mainRouter{
  height: 100%;
}
body{
  margin: 0;
  background: #ddd;
}
*{
  box-sizing:border-box !important;
}
.clearfix{
  zoom:1;
}
.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.pull-left{
  float: left;
}
.pull-right{
  float: right;
}

.fold-enter-active {
  animation-name: fold-in;
  animation-duration: .5s;
}
.fold-leave-active {
  animation-name: fold-out;
  animation-duration: .5s;
}
@keyframes fold-in {
  0% {
    transform: translate3d(0, 10%, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes fold-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 10%, 0);
    opacity: 0;
  }
}

.fade-enter-active {
  animation-name: fade-in;
  animation-duration: .5s;
}
.fade-leave-active {
  display: none;
}
@keyframes fade-in {
  0% {
    opacity: 0;
    transform:translate3d(0,20px,0);
  }
  100% {
    opacity: 1;
    transform:translate3d(0,0,0);
  }
}
</style>
